<template>
  <div class="parent">
    <h1>ToDoList</h1>
    <div class="box">
      <input
        type="text"
        class="input"
        placeholder="输入今日目标吧😊"
        @keyup.enter="handleEnter"
        v-model="msg"
      />
      <div v-if="incomplete.length" class="incomplete">
        <h3>未完成--{{ incomplete.length }}</h3>
        <ul v-for="(item, index) of incomplete" :key="item">
          <li>
            <input
              type="checkbox"
              @click="handleClick(index, 'incomplete')"
            />{{ item }}
            <button @click="handleD(index, 'incomplete')">删除</button>
          </li>
        </ul>
      </div>
      <div v-if="complete.length" class="complete">
        <h3>已完成--{{ complete.length }}</h3>
        <ul v-for="(item, index) of complete" :key="item">
          <li>
            <input type="checkbox" @click="handleClick(index)" checked />{{
              item
            }}
            <button @click="handleD(index)">删除</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive } from "@vue/reactivity";
import { toRefs, watch } from "vue";
export default {
  name: "App",
  setup() {
    const state = reactive({
      msg: "",
      incomplete: JSON.parse(localStorage.getItem("incomplete")) || [],
      complete: JSON.parse(localStorage.getItem("complete")) || [],
      handleEnter() {
        var incomplete = this.incomplete;
        var complete = this.complete;
        var msg = this.msg.trim();
        if (!incomplete.includes(msg) && !complete.includes(msg) && msg != "") {
          incomplete.push(msg);
          localStorage.setItem("incomplete", JSON.stringify(incomplete));
          this.incomplete = incomplete;
          this.msg = "";
        } else {
          alert("已经在今日行程中了哟💖");
          this.msg = "";
        }
      },
      handleD(index, val) {
        var incomplete = this.incomplete;
        var complete = this.complete;
        if (val) {
          incomplete.splice(index, 1);
          localStorage.setItem("incomplete", JSON.stringify(incomplete));
        } else {
          complete.splice(index, 1);
          localStorage.setItem("complete", JSON.stringify(complete));
        }
      },
      handleClick(index, val) {
        var incomplete = this.incomplete;
        var complete = this.complete;
        if (val) {
          complete.push(...incomplete.splice(index, 1));
        } else {
          incomplete.push(...complete.splice(index, 1));
        }
        localStorage.setItem("complete", JSON.stringify(complete));
        localStorage.setItem("incomplete", JSON.stringify(incomplete));
      },
    });
    watch(
      () => state.incomplete,
      () => {
        console.log(1);
      },
      { deep: true }
    );
    const refState = toRefs(state);
    return {
      ...refState,
    };
  },
};
</script>
<style scoped>
h1 {
  text-align: center;
}
li {
  list-style: none;
  position: relative;
}
button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: red;
  color: #fff;
}
.input {
  width: 600px;
  height: 50px;
  padding-left: 20px;
  display: block;
  margin: auto;
}
.parent {
  width: 750px;
  margin: auto;
}
</style>
